<template>
  <div>
    <ul class="list">
      <li v-for="(item , index) in routerList" :key="index" :class="{'active':item.index==currentIndex||index==0}">
        <router-link :to="{path: item.path}" class="router">
          <span @click="add(item.index,index)">{{item.name}}</span>
        </router-link>
        <i class="inlineBlockIcon" @click.self="delTopTip(item.index)" v-if="index>0"></i>
        <!--<div class="router" @click.self="toPath(item.path)">-->
          <!--<span>{{item.name}}</span>-->
          <!--<i class="inlineBlockIcon" @click.self="delTopTip(item.index)" v-if="index>0"></i>-->
        <!--</div>-->
      </li>
    </ul>
  </div>
</template>

<script>
  import bus from '../assets/eventBus'
  export default {
    name: 'routerTop',
    data () {
      return {
        routerList:this.$store.state.router,
        routerCurrent:this.$store.state.routerCurrent,
        currentIndex:this.$store.state.currentIndex
      }
    },
    mounted () {
      let that = this
      bus.$on('route',function(data){
        let list = that.routerList
        if(list.length>0){
          let n = 0
          for(let i=0;i<list.length;i++){
            if(list[i].name==data.name){
              n++
            }
          }
          if(n==0){
            that.routerList.push(data)
          }
        }else{
          that.routerList.push(data)
        }
      })
      bus.$emit('routes',this.routerList)
    },
    methods:{
      /*add函数专门是便利于导航之间相互传递参数的。*/
      add (current,index) {
        if(parseInt(current)==2||parseInt(current)==4){
          this.$store.commit('routerCurrent',parseInt(current))
          this.$store.commit('BoxCurrent',current)
        }else{
          this.$store.commit('routerCurrent',current)
        }
        this.$store.commit('currentIndex',current)
      },
      delTopTip (current) {
        console.log(this.$store.state.router)
        let list = this.$store.state.router
        let newCurrent
        for(let key in list){
          if(list[key].index==current){
            this.$router.push({
              path:list[key-1].path
            })
            newCurrent = list[key-1].index
            this.$store.commit('currentIndex',newCurrent)
            list.splice(key,1)
          }
        }
        this.$store.commit('router',list)
        if(parseInt(newCurrent)==2||parseInt(newCurrent)==4){
          this.$store.commit('routerCurrent',parseInt(newCurrent))
          this.$store.commit('BoxCurrent',newCurrent)
        }else{
          this.$store.commit('routerCurrent',newCurrent)
        }
      }
    }
  }
</script>

<style scoped>
  @import '../assets/public.css';
  .list{
    display: flex;
    align-items: center;
    width:100%;
    background-color: #f0f0f0;
  }
  .list>li{
    color: #666;
    font-size:18px;
    display: flex;
    align-items: center;
  }
  .list>li.active{
    background-color: #D6EBFC;
    color: #3C7FAF;
  }
  .router{
    display: flex;
    align-items: center;
    padding:0 15px;
    height:61px;
  }
  .list>li>i{
    width:16px;
    height:16px;
    background: url("img/del.png");
    margin:0 8px;
  }
</style>
